<template>
	<view class="wrapper">
		<view class="module1">
			<image src="../../static/trade/buy/icon1.png" mode=""></image>
			<view>周期驱动股票发起式C(019880)</view>
		</view>
		<view class="module2">
			<view class="kyzj">可用资金</view>
			<view class="input">
				<input type="text" value="¥594.54"/>
			</view>
			<view class="zrzj">转入资金</view>
		</view>
		<view class="module3">
			<view class="m3-1">
				<view class="left">购买金额</view>
				<view class="right redtext">交易规则</view>
			</view>
			<view class="m3-2">
				<view class="dl">￥</view>
				<input type="text" value="" placeholder-style="m3-2" placeholder="最低买入1.00元起"/>
			</view>
			<view class="tip">买入费率 <text class="redtext">0%</text>预计以04月01日净值确认份额</view>
		</view>
		<view class="module4">
			<view class="title">交易须知:</view>
			<view class="content">1.交易日15:00前购买，预计按当日净值确认份额;15:00后购买顺延至下一交易日 2.本产品不保证本金和收益，存在本金和收</view>
		</view>
		<view class="module5"><view class="btn">确定</view></view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background-color: #F6F6FB;
	}
	.wrapper {
		height: 100%;
		box-sizing: border-box;
	}
	.module1{
		margin: 32rpx auto;
		padding: 0 33rpx;
		height: 92rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(8,55,125,0.1);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 20rpx;
		image{
			width: 26rpx;
			height: 26rpx;
		}
	}
	.module2{
		margin: 0 auto 32rpx;
		padding: 0 33rpx;
		height: 92rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(8,55,125,0.1);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 20rpx;
		.kyzj{
			font-size: 28rpx;
			color: #999999;
		}
		.input{
			flex: 1;
			font-weight: bold;
			font-size: 28rpx;
			color: #262626;
		}
		.zrzj{
			font-size: 24rpx;
			color: #EA0E00;
		}
	}
	.module3{
		margin: 0 auto 32rpx;
		padding: 0 33rpx;
		height: 288rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(8,55,125,0.1);
		.m3-1{
			height: 92rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 20rpx;
			.right{
				font-size: 24rpx;
				color: #EA0E00;
			}
		}
		.m3-2{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			gap: 20rpx;
			margin: 25rpx auto 40rpx;
		}
		.m3-2 input{
			font-weight: bold;
			font-size: 42rpx;
			color: #999999;
		}
		.tip{
			font-size: 28rpx;
			color: #999999;	
		}
		
	}
	.module4{
		margin: 0 auto 33rpx;
		padding: 0 33rpx;
		.title{
			font-size: 24rpx;
			color: #262626;
		}
		.content{
			font-size: 24rpx;
			color: #999999;
			line-height: 36rpx;
		}
	}
	.module5{
		padding: 0 33rpx;
		.btn{
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			color: #fff;
			background: linear-gradient(to right, #004EC2, #08377D);
			border-radius: 20rpx;
		}
	}
</style>